<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../assets/styles.css">
  <title>英雄联盟官网仿写</title>
</head>

<body>
  <!-- 4.1 顶部导航栏 -->
  <nav>
    <ul class="nav-list">
      <li><a href="#">首页</a></li>
      <li class="has-submenu">
        <a href="#">新闻资讯</a>
        <ul class="submenu">
          <li><a href="#">最新资讯</a></li>
          <li><a href="#">活动公告</a></li>
        </ul>
      </li>
      <!-- 其他导航项 -->
    </ul>
  </nav>

  <!-- 4.2 搜索框 -->
  <div class="search-box">
    <input type="text" placeholder="搜索">
    <button>搜索</button>
  </div>

  <!-- 4.3 轮播图 -->
  <div class="carousel">
    <div class="carousel-images">
      <img src="path/to/image1.jpg" alt="Image 1">
      <img src="path/to/image2.jpg" alt="Image 2">
      <img src="path/to/image3.jpg" alt="Image 3">
    </div>
    <div class="carousel-tabs">
      <span class="tab active"></span>
      <span class="tab"></span>
      <span class="tab"></span>
    </div>
  </div>

  <!-- 4.4 带 Tab 栏的列表 -->
  <div class="tab-list">
    <ul class="tab-list-tabs">
      <li class="tab-list-tab active">Tab 1</li>
      <li class="tab-list-tab">Tab 2</li>
      <li class="tab-list-tab">Tab 3</li>
    </ul>
    <div class="tab-list-content">
      <div class="tab-list-pane active">Content of Tab 1</div>
      <div class="tab-list-pane">Content of Tab 2</div>
      <div class="tab-list-pane">Content of Tab 3</div>
    </div>
  </div>

  <!-- 4.4 按钮 -->
  <div class="buttons">
    <button class="download-button">下载游戏</button>
    <button class="newbie-button">新手必备</button>
  </div>

  <!-- 4.4 赛事中心的树形布局 -->
  <div class="event-tree">
    <ul>
      <li>赛事 1
        <ul>
          <li>子赛事 1-1</li>
          <li>子赛事 1-2</li>
        </ul>
      </li>
      <li>赛事 2
        <ul>
          <li>子赛事 2-1</li>
          <li>子赛事 2-2</li>
        </ul>
      </li>
    </ul>
  </div>

  <!-- 4.4 英雄资料 -->
  <div class="hero-info">
    <h2>英雄资料</h2>
    <div class="hero-categories">
      <button class="hero-category active">法师</button>
      <button class="hero-category">刺客</button>
      <button class="hero-category">战士</button>
    </div>
    <div class="hero-list">
      <div class="hero-category-pane active">
        <ul>
          <li>安妮</li>
          <li>瑞兹</li>
        </ul>
      </div>
      <div class="hero-category-pane">
        <ul>
          <li>卡兹克</li>
          <li>凯隐</li>
        </ul>
      </div>
      <div class="hero-category-pane">
        <ul>
          <li>盖伦</li>
          <li>诺克萨斯之手</li>
        </ul>
      </div>
    </div>
  </div>

  <script src="../components/nav.js"></script>
  <script src="../components/search.js"></script>
  <script src="../components/carousel.js"></script>
  <script src="../components/tabList.js"></script>
  <script src="../components/button.js"></script>
  <script src="../components/eventTree.js"></script>
  <script src="../components/heroInfo.js"></script>
</body>

</html>